<template>
	<view class="contain" :style="{'padding-top': statusBarHeight}">
		
		<div class="row_between head_wrap" @click="closeLogin">
			<image src="../../static/img/close_icon.png" mode="aspectFill" />
		</div>
		
		<div class="login_text">输入验证码</div>
		<div class="phone_wrap">
			<span class="text">已发送短信至：</span>
			<span>{{phone}}</span>
		</div>
		
		<div class="login_wrap">
			<div class="row_wrap">
				<div class="row">
					<input type="number" placeholder="输入验证码" placeholder-class="place-holder"
						maxlength="6" class="mobile" v-model="account" >
						
					<image src="../../static/img/input_close.png" mode="aspectFill" v-if="isShowInputClose" @click="clearInput"></image>
					
					<span class="time_wrap" v-if="timeCtn != 0">{{timeCtn}}s后重新获取</span>
					<span class="time_wrap_active" v-else @click="retryGetCode">重新获取</span>
				</div>
			</div>
			<div class="row_wrap" style="margin-bottom: 23upx;">
				<div class="row">
			
					<input type="password" placeholder="输入登录密码(选填)" focus placeholder-class="place-holder" pattern="\d*" 
						class="password" v-model="password" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar">
					
				</div>
			</div>
			
		</div>
		<div class="note_text">密码不少于6位，至少包含字母/数字/字符2种组合</div>
		<div class="agree_wrap">
			<radio color="#000000" :checked="ischeck" @click="changeCheckbox" style="transform:scale(0.6)"/>
			<span>同意</span>
			<span class="text" @click="goToAgress">《趣读财经用户注册及隐私协议》</span>
		</div>
		<button type="button" class="button" :class="{'input_active': btnActive}"
			@click="loginAction">注册</button>
			<div class="to_code_wrap">
				<span class="left_text" @click="noCode">收不到验证码？</span>
			</div>
		
		<div class="flex_one col">
			<div class="flex_one"></div>
			
			<div class="row_center bottom_wrap" :style="{'visibility': (tabbar?'visible':'hidden')}">
				<image src="../../static/img/logo_text.png" mode="widthFix"></image>
			</div>
		</div>
		
	</view>
</template>

<script>
	import { BASE_URL,login,sendCode } from '@/utils/api'
	import {igexinTool} from '../../utils/geTuiTool.js'
	
	export default {
		data() {
			return {
				statusBarHeight: 0,
				account: '',
				password:'',
				isShowInputClose: false,
				btnActive: false,
				isShowLoading: false,
				timeCtn: 60,
				phone: 0,
				phoneNum: 0,
				intervalObj: {},
				tabbar: true,
				windowHeight: '',
				ischeck:false
			};
		},
		watch:{
			account(){
				this.changeInput();
			},
			ischeck(){
				this.changeInput();
			}
		},
		methods:{
			showTabbar(){
				this.changeTabBar(true);
			},
			hideTabbar(){
				this.tabbar = false;
				this.$forceUpdate();
			},
			clearInput(){
				this.account = "";
				this.btnActive = false;
				this.$forceUpdate();
			},
			changeTabBar(value){
				setTimeout(()=>{
					this.tabbar = value;
					this.$forceUpdate();
				}, 100);
			},
			closeLogin: function(){
				uni.navigateBack({
					delta: 1
				});
			},
			changeInput(){
				if(this.account && this.ischeck){
					// this.isShowInputClose = true;
					if(this.account.length == 6){
						this.btnActive = true;
					}else{
						this.btnActive = false;
					}
				}else{
					this.isShowInputClose = false;
					this.btnActive = false;
				}
				this.$forceUpdate();
			},
			async getCodeAction(){
				let res = await sendCode(this.phoneNum);
				if(res.code == 1){
					uni.showToast({
					  icon: 'none',
					  title: '获取验证码成功',
					  duration: 1000
					});
					this.countDown();
				}else{
					uni.showToast({
					  icon: 'none',
					  title: res.message,
					  duration: 1000
					});
				}
			},
			
			async loginAction(){
				if(!this.btnActive){
					return;
				}
				if(this.password && (!(/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/.test(this.password)))){
					uni.showToast({
					  icon: 'none',
					  title: '密码不少于6位，至少包含字母/数字/字符2种组合',
					  duration: 1000
					});
					return;
				};
				
				this.btnActive =false;
				this.isShowLoading = true;
				
				let res = await login(this.phoneNum, this.account, this.password);
				if(res.code == 1){
					uni.showToast({
					  icon: 'none',
					  title: '注册成功',
					  duration: 1000
					});
					let platform =uni.getSystemInfoSync().platform;
					uni.setStorageSync("auth_token", res.data);
					
					// #ifdef APP-PLUS
						plus.navigator.setCookie(BASE_URL, 'auth_token='+res.data+";expires=Friday,24-Jan-3014 16:24:36 GMT");
						
						plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo){  
							console.log(wgtinfo.version);  
							if(platform == "android"){
								uni.setStorageSync("tpjk_app_version", "ANDROID_"+wgtinfo.version);
								plus.navigator.setCookie(BASE_URL, "tpjk_app_version=ANDROID_"+wgtinfo.version);
							}else{
								uni.setStorageSync("tpjk_app_version", "IOS_"+wgtinfo.version);
								plus.navigator.setCookie(BASE_URL, "tpjk_app_version=IOS_"+wgtinfo.version);
							}
						});
					// #endif
					setTimeout(() => {
						console.log(this.url);
						if(this.url && (this.url.indexOf("http") != -1)){
							uni.navigateBack({
								delta: 3
							});
							uni.navigateTo({
								url:'../../login_webview/login_webview?url='+this.url
							})
						}else{
							uni.navigateBack({
								delta: 2
							});
						}
						
					}, 1000);
					
				}else{
					uni.showToast({
					  icon: 'none',
					  title: res.message,
					  duration: 1000
					});
					this.btnActive =true;
					this.isShowLoading = false;
				}
			},
			
			countDown() {
				let that = this;
			    this.intervalObj = setInterval(function() {
			        that.timeCtn--;
			        if (that.timeCtn <= 0) {
			            that.timeCtn = 0;
			            clearInterval(that.intervalObj);
			        } else {
						
			        }
			
			    }, 1000);
			},
			retryGetCode(){
				this.timeCtn = 60;
				this.getCodeAction();
			},
			goToAgress(){
				uni.navigateTo({
					url:'../agressment/agressment'
				})
			},
			changeCheckbox(){
				this.ischeck=!this.ischeck;
			},
			noCode(){
				uni.navigateTo({
					url:'../cannot_get_pwd/cannot_get_pwd'
				})
			}
		},
		onLoad(opt) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
			let account = opt.account;
			this.phoneNum = opt.account;
			this.phone = account.substring(0,3)+"****"+account.substring(7, 11);
			this.countDown();
			uni.getSystemInfo({
			        success: (res)=> {
			            this.windowHeight = res.windowHeight;
			        }
			    });  
				
				setTimeout(()=> {
					uni.onWindowResize((res) => {
						console.log(res.size.windowHeight);
						console.log(this.windowHeight);
				        if(res.size.windowHeight < this.windowHeight){
				            this.hideTabbar();
				        }else{
				            this.changeTabBar(true);
				        }
				    })
				},2000) 
				
		}
	}
</script>

<style lang="scss">
	input{width: 100%;}
	.contain{width: 100%; height: 95vh;display: flex;flex-direction: column;}
	.head_wrap{position: relative;}
	.head_wrap image{width:48upx;height: 48upx;position: absolute;right: 20upx; top: 60upx;}
	.login_text{color: #333333; font-size: 40upx; text-align: center; margin-top: 182upx; font-weight: bold;}
	.mobile{height: 48upx;}
	.input_active{background-color: #FFCA0A!important;}
	.phone_wrap{text-align: center;}
	.phone_wrap .text{font-size: 30upx; color: #666666;}
	.phone_wrap .phone{color: #010101; font-size: 36upx; font-weight: bold;}
	
	.agree_wrap{margin: 56upx 65upx 0upx; font-size: 24upx; color: #303030;}
	.agree_wrap .text{color: #FFCA0A;}
			.logo_wrap{
				margin: 40upx auto 100upx;
				text-align: center;
			}
			
			.login_wrap{
				padding: 0upx 67upx;
				margin-top: 60upx;
			}
			
			.row_wrap{border-bottom: 2upx solid #E3E3E3;}
			.row_wrap image{width: 48upx; height: 48upx;}
			
			.login_wrap div{
				
				padding: 0upx 8upx;
				margin-bottom: 30upx;
			}
			
			.login_wrap input{
				margin-bottom: 0upx;
				border: none;
				background: transparent;
			}
			
			::-webkit-input-placeholder{
				color: #999999;
				font-size: 28upx;
			}
			
			.bottom_wrap{ margin-bottom: 132upx; width: 100%;}
			.bottom_wrap image{width: 305upx;}
			
			.button{
				border-radius: 16upx;
				margin: 21upx 65upx 0upx;
				box-sizing: border-box;
				background-color: #CCCCCC;
				color: #303030;
				font-size: 36upx;
				height: 94upx;
				line-height: 94upx;
				font-weight: bold;
			}
			uni-button:after{border: none!important;}
.time_wrap{width: 280upx; height: 53upx; line-height: 53upx; color: #FFFFFF; font-size: 24upx; background: #CCCCCC;
	 border-radius: 8upx; text-align: center; min-width: 150upx;}			
.time_wrap_active{width: 280upx; height: 53upx; line-height: 53upx; color: #333333; font-size: 24upx; background: #FFCA0A;
	 border-radius: 8upx; text-align: center; min-width: 150upx;}			
.to_code_wrap{
	color: #999999;
	font-size: 30upx;
	line-height: 1.0;
	text-align: right;
	margin: 27upx 65upx 0upx;
}	
.note_text{
	color: #666666;
	font-size: 26upx;
	line-height: 1.0;
	margin-left: 65upx;
}
</style>
